<template>
  <div class="navbar">
    <section class="com-left-side">
      <section class="com-left-side_top-part">
        <div class="com-left-side_site">
          <img src="@/assets/imgs/header_logo.png" /> 小萤星
        </div>
        <div class="com-side-item has-sublist">
          <div class="com-side-item_base">
            <span class="com-side-item_base-icon">
              <i class="iconfont icon-duihua"></i>
            </span>
            <span class="com-side-item_base-text">AI对话</span>
          </div>
          <div class="com-side-item_sub-list">
            <div
              class="com-side-item_base com-side-item_sub-base is-active"
              @click="isShow = !isShow"
            >
              <span class="com-side-item_base-text">历史对话</span>
              <span class="com-side-item_sub-base-nums">1</span>
            </div>
          </div>
        </div>
        <div class="com-side-item">
          <div class="com-side-item_base">
            <span class="com-side-item_base-icon">
              <i class="iconfont icon-ai"></i>
            </span>
            <span class="com-side-item_base-text">智能论文</span>
          </div>
        </div>
      </section>
      <section v-if="!isLogin" class="com-left-side_bottom-part">
        <div class="com-side-item" @click="showLoginPop = true">
          <div class="com-side-item_base">
            <span class="com-side-item_base-icon">
              <i class="iconfont icon-yonghu"></i>
            </span>
            <span class="com-side-item_base-text">登录</span>
          </div>
        </div>
      </section>
      <section v-else class="com-left-side_bottom-part">
        <div class="com-side-item">
          <div class="com-side-item_base">
            <span class="com-side-item_base-icon">
              <img
                src="@/assets/imgs/avatar.jpg"
                alt="139****2529"
                style="border-radius: 100%"
              />
            </span>
            <span class="com-side-item_base-text">139****2529</span>
            <i class="iconfont icon-youjiantou"></i>
          </div>
        </div>
        <div class="com-left-side_vip-btn">
          <img
            src=""
            alt="会员"
          />开通会员
        </div>
      </section>
    </section>
    <div class="ssb" :class="{ 'is-show': isShow }">
      <div class="ssb-container">
        <div class="lb-chat-left-btn">
          <i class="iconfont icon-jiahao"></i>创建新对话
        </div>
        <div class="lb-chat-left-lists">
          <div class="lb-chat-left-lists-li is-active">
            <div class="lb-chat-left-li-name">
              <i class="iconfont icon-xiaoxi"></i>
              <span
                class="ellipsis lb-chat-left-li-name-txt"
                title="初次体验下流畅不流畅 "
                >初次体验下流畅不流畅
              </span>
              <div class="lb-chat-left-li-name-btns">
                <i class="iconfont icon-bianji il"></i>
                <i class="iconfont icon-shanchu ir"></i>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="ssb-eh pad-hide">
        <div class="ssb-eh__close">
          <i class="iconfont icon-zuojiantou"></i>
        </div>
      </div>
    </div>
    <LoginPop :show.sync="showLoginPop" />
  </div>
</template>

<script>
import LoginPop from "@/components/LoginPop";
export default {
  name: "LayoutNavbarIndex",
  components: {
    LoginPop,
  },
  data() {
    return {
      isShow: false,
      isLogin: false,
      showLoginPop: false,
    };
  },
};
</script>

<style lang="less" scoped>
.navbar {
  height: 100%;
  display: flex;
  .com-left-side {
    width: 164px;
    background: #0d0f10;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border-radius: 8px 0 0 8px;
    .com-left-side_top-part {
      padding: 0 8px;
      .com-left-side_site {
        position: relative;
        margin-bottom: 12px;
        display: flex;
        align-items: center;
        padding: 16px 8px;
        font-size: 16px;
        color: #fafafa;
        cursor: pointer;
        img {
          width: 24px;
          height: auto;
          margin-right: 8px;
        }
        &::after {
          display: block;
          content: "";
          position: absolute;
          left: 8px;
          right: 8px;
          bottom: 0;
          height: 1px;
          background-color: #2b2d31;
        }
      }
    }
    .com-left-side_bottom-part {
      padding: 12px 8px;
      position: relative;
      .com-left-side_vip-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 8px 12px 0;
        height: 28px;
        background: linear-gradient(138deg, #ffe798 0%, #ffcc65 100%);
        border-radius: 6px;
        cursor: pointer;
        font-size: 13px;
        color: #643d00;
        font-weight: 500;
        img {
          width: 14px;
          margin-right: 6px;
        }
        &:hover {
          opacity: 0.9;
        }
      }
      .icon-youjiantou {
        color: #bfbfbf;
        position: absolute;
        right: 4px;
        top: 50%;
        transform: translate3d(0, -50%, 0);
      }
      &::after {
        display: block;
        content: "";
        position: absolute;
        left: 8px;
        right: 8px;
        top: 0;
        height: 1px;
        background-color: #2b2d31;
      }
    }
    .com-side-item {
      font-size: 13px;
      .com-side-item_sub-list {
        height: auto;
        .com-side-item_sub-base {
          padding-left: 34px;
        }
      }
      .com-side-item_base {
        height: 44px;
        border-radius: 8px;
        display: flex;
        align-items: center;
        color: #fafafa;
        transition: background 0.3s;
        padding: 0 10px;
        position: relative;
        cursor: pointer;
        .com-side-item_base-icon {
          width: 16px;
          height: 16px;
          display: flex;
          align-items: center;
          justify-content: center;
          flex-shrink: 0;
          margin-right: 8px;
          img {
            width: 100%;
            height: auto;
          }
        }
        .com-side-item_base-text {
          user-select: none;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          max-width: 86px;
        }
        .com-side-item_sub-base-nums {
          height: 18px;
          line-height: 18px;
          background: rgba(217, 217, 217, 0.18);
          color: #d9d9d9;
          border-radius: 9px;
          padding: 0 2px;
          min-width: 18px;
          text-align: center;
          margin-left: 12px;
          font-size: 12px;
        }
        &.is-active {
          background: #2b2d31;
        }
        &:active,
        &:hover {
          background: #2b2d31;
        }
      }
    }
  }
  .ssb {
    display: flex;
    height: 100%;
    width: 0;
    background: #ffffff;
    z-index: 10;
    position: relative;
    transition: width 0.2s;
    &.is-show {
      width: 270px;
    }
    .ssb-container {
      width: 100%;
      overflow: hidden;
      box-shadow: 2px 0 12px 1px #0000000f;
      display: flex;
      flex-direction: column;
      height: 100%;
      width: 270px;
      .lb-chat-left-btn {
        padding: 10px 12px;
        color: #fff;
        cursor: pointer;
        border: 1px solid #4d4d4f;
        border-radius: 8px;
        margin: 20px 20px 8px;
        background-color: #0d0f10;
        text-align: center;
        .icon-jiahao {
          margin-right: 10px;
          font-size: 16px;
        }
      }
      .lb-chat-left-lists {
        margin-top: 20px;
        height: 0;
        flex: 1 1;
        padding: 0 12px;
        overflow-y: auto;
        .lb-chat-left-lists-li {
          color: #141414;
          padding: 12px;
          cursor: pointer;
          margin-bottom: 5px;
          border-radius: 8px;
          position: relative;
          .lb-chat-left-li-name {
            display: flex;
            align-items: center;
            padding-right: 50px;
            .lb-chat-left-li-name-txt {
              width: 70%;
              padding: 0 6px;
            }
          }
          .lb-chat-left-li-name-btns {
            position: absolute;
            right: 12px;
            .il {
              font-size: 14px;
              margin-right: 4px;
            }
            .ir {
              font-size: 14px;
              margin-left: 10px;
              margin-right: 4px;
            }
          }
          &.is-active {
            background: #eee;
          }
        }
      }
    }
    .ssb-eh {
      position: absolute;
      left: 100%;
      top: 62px;
      .ssb-eh__close {
        width: 20px;
        text-align: center;
        line-height: 32px;
        background: #ffffff;
        box-shadow: 4px 0 16px 1px #3634651a;
        border-radius: 0 6px 6px 0;
        border: 1px solid #e5e5e5;
        border-left: none;
        cursor: pointer;
        color: #141414;
      }
    }
  }
}
</style>
